<template>
  <div id="app">
    <h2>购物车</h2>
    <div v-for="item in cartItems" :key="item.id">
      {{ item.name }} - ¥{{ item.price }} - 数量：{{ item.quantity }}
      <button @click="increment(item)">+</button>
      <button @click="decrement(item)">-</button>
    </div>
    <p>总价：¥{{ total }}</p>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations } from 'vuex';

export default {
  name: 'App',
  computed: {
    ...mapState(['cartItems']),
    ...mapGetters(['total']) // 使用 mapGetters 获取总价
  },
  methods: {
    ...mapMutations(['increment', 'decrement'])
  }
};
</script>

<style>
/* 添加一些样式以提高可读性 */
#app {
  font-family: Arial, sans-serif;
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

h2 {
  text-align: center;
}

div {
  margin-bottom: 10px;
}

button {
  margin-left: 5px;
}
</style>